<template>
	<view class="xpy" v-for="(item,index) in columns" :key="index">
		<view class="w-100 mt-1 mb-2">
			<view v-if="index != 1||screenWidth>480" class="h3 flex justify-between align-center px-2 bg-white"
				style="height: 100rpx;border-left: 10rpx solid green;"
				:style="index==columns.length-1?'border-radius: 12rpx;':''">
				<!-- 导航紧挨着的标题 -->
				<text class="font-lg">{{item.Column_Name}}</text>
				<view style="width: 60rpx;height: 78rpx;">
					<image :src="Domain_ICON+'/fire.png'" alt="" mode="aspectFit" class="img"></image>
				</view>
			</view>
			<image v-if="index == 1" :src="Domain_ICON+'/hwyx.webp'"
				:style="screenWidth>480?'height: 400rpx;':'height: 200rpx;'" class="img" alt=""></image>
		</view>
		<!-- 第一个类目 -->
		<view v-if="index==0" class="px-2 flex flex-wrap justify-between bg-white"><!--dztj-->
			<view class="mt-1" v-for="(item1,index1) in item.Data.slice(0,4)" :key="index1"
				@click="productClick(item1)"
				style="border:1px solid rgb(22,118,58);"
				:style="screenWidth<480?'height: 350rpx;width: 49% ;':'width: 24% ;height: 400rpx;'">
				<image :src="Domain_IMG+item1.Picture_URL" mode="aspectFit" class="img"></image>
			</view>
		</view>
		<!-- 其他类目 -->
		<view v-else class="flex" :class="screenWidth>480?'flex-wrap':'flex-column'">
			<view class="mb-3 py-1 px-2 flex " :class="screenWidth>480?'bg-white ml-1 rounded-lg':''"
				:style="screenWidth>480?'width: 22%;':''" style="height: 250rpx;"
				v-for="(item1,index1) in item.Data" :key="index1"
				@click="productClick(item1)">
				<!-- 左侧商品图片 -->
				<view class="left"
					style="width:55%; height: 100%; background-color: #fff;border:1px solid rgb(22,118,58);">
					<image :src="Domain_IMG+item1.Picture_URL" class="img" alt="" mode="aspectFit"></image>
				</view>
				<!-- 右侧商品信息 -->
				<view class="right ml-2 flex flex-column justify-between w-100">
					<view class="">
						<!-- 商品名 -->
						<view class="font">{{item1.Article_Name}}</view>
					</view>
					<view class="flex justify-between">
						<!-- 商品价格 -->
						<view class="flex align-center align-center">
							<money :money="item1.specifications[0].Sales_Unit_Price"></money>
						</view>
						<!-- 购物车字体 -->
						<view style="width: 40rpx; height: 40rpx;z-index: 10;" @click.stop="shopCart(item1)">
							<image :src="Domain_ICON+'/shopcart.png'" mode="" class="img" style=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="index!=0" class="flex justify-center font-sm"
			@click="searchAll(item)">查看全部</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name:"index_goods",
		data() {
			return {
				screenWidth: uni.getSystemInfoSync().windowWidth,
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_ICON: app.globalData.Domain_ICON, //图标域名
				
			};
		},
		props:{
			columns:{
				type:Array,
				default:[],
				
			}
		},
		methods:{
			productClick(item){
				this.$emit('product',item)
			},
			searchAll(item){
				this.$emit('search',item)
			}
		}
	}
</script>

<style>

</style>